<template>
	<view class="sale-record">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :loading-full-fixed="true"
			:refresher-enabled="false" :use-virtual-list="true">
			<view slot="top" class="bg-box">
				<u-navbar title="核销记录" title-color="#000" back-icon-color="#000" :back-text-style="{color: '#000'}"
					:border-bottom="false" :background="{background: 'transparent'}"></u-navbar>
				<view class="p-rela d-flex flex-column justify-start align-center mt-20 user-info-box ">
					<view class="p-rela d-flex flex-column justify-center align-start mb-20 user-info-card">
						<view class="p-rela d-flex px-62 py-20 user-info">
							<image src="@/static/images/default_head.png" class="mr-26 avatar"></image>
							<view class="d-flex flex-column justify-center user">
								<view class="font-32 font-bold mb-6">{{userInfo.realName}}</view>
								<view class="font-24">{{userInfo.phoneNumber}}</view>
							</view>
						</view>
					</view>
					<view class="d-flex justify-space-between align-center mb-20 px-30 company" @click="switchCompany">
						<view class="d-flex align-center font-28 name">
							<image src="@/static/images/change_company.png" class="mr-20"
								style="width: 56rpx;height: 58rpx;"></image>{{deptName}}
						</view>
						<view class="d-flex justify-center align-center change-company">
							切换<image src="@/static/images/change_scenic.png" class="ml-6"></image>
						</view>
					</view>
				</view>
				<view class="flex-center justify-space-between pa-30 pb-20 input-box">
					<image src="../static/images/search.png"></image>
					<u-input v-model="code" :border="false" placeholder="输入智能卡号/票号/手机号"></u-input>
					<view class="flex-center  btn-box" @click="searchRecord()">搜索</view>
				</view>
			</view>
			<view class="px-30 record-card">
				<view class="record-box">
					<block v-for="item in dataList">
						<view class="record-detail">
							<view class="detail-top">
								<view class="flex-center justify-space-between record-name">
									<view class="font-24 name">
										{{item.writeOffType == 1 ? '电子票' : '智能卡'}}--{{item.name}}
									</view>
									<view class="font-24 scenic">{{item.scenicSpotName || ''}}</view>
								</view>
								<view class="flex-center justify-start info-box">
									<view class="mr-30 flex-center icon-box">
										<!-- <image :src="item.img" mode="aspectFill" class="bg1"></image> -->
										<u-image width="170rpx" height="170rpx" border-radius="10rpx"
											:src="item.img"></u-image>
										<!-- <image src="../../../static/images/record_bg.png" class="bg2"></image> -->
									</view>
									<view class="d-flex flex-column justify-space-between font-24 info" style="height: 120rpx;">
										<view>票券号码：{{item.writeOffType == 1 ? item.ticketNo : item.memberNumber}}</view>
										<view>手机号码：{{item.receivePhone || ''}}</view>
										<view>核销时间：{{item.writeOffTime}}</view>
										<!-- <view class="font-24 mt-20" style="color: #E68700; font-weight: bold;">
											该票剩余核销次数：<text>{{item.remainsWriteOffNumber}}次</text></view> -->
									</view>
								</view>


								<!-- <view>核销人：{{item.writeOffUserName}}</view> -->
							</view>
							<!-- <view class="detail-bottom">
								<view>该票已核销次数：<text>{{item.writeOffNumber}}次</text></view>
								<view>该票剩余核销次数：<text>{{item.remainsWriteOffNumber}}次</text></view>
							</view> -->
						</view>

					</block>

				</view>


			</view>
			<loading-page :show="true" slot="loading"></loading-page>
		</z-paging>



	</view>
</template>

<script>
	import {
		pageList
	} from '@/api/home.js'
	export default {
		data() {
			return {
				userInfo: null,
				deptName: "请选择机构",
				code: "",
				dataList: [],
				userInfo: {},
				deptId: ''
			}
		},
		onLoad() {
			this.userInfo = this.$store.getters.getUserInfo;

			this.deptId = uni.getStorageSync('deptId') || ""
		},
		methods: {
			queryList(pageNo, pageSize) {
				pageList({
					writeOffNo: this.code,
					deptId: this.deptId,
					pageNum: pageNo,
					pageSize: pageSize,
				}).then(res => {
					console.log('核销记录', res)
					this.$refs.paging.complete(res.rows)
				}).catch(err => {
					this.$refs.paging.complete(false)
				})
			},
			searchRecord() {
				if (this.userInfo) {
					this.$refs.paging.reload();
				} else {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
				}
			},
			switchCompany() {
				uni.navigateTo({
					url: `../choose-company/choose-company`,
				});
			},
		},
		async onShow() {
			if (uni.getStorageSync('deptName') != "") {
				this.deptName = uni.getStorageSync('deptName')
			}
			if (this.deptId && this.deptId != uni.getStorageSync('deptId')) {
				this.deptId = uni.getStorageSync('deptId')
				this.code = ''
				this.searchRecord()
			}
			let userInfo = this.$store.getters.getUserInfo;
			if (userInfo) {
				this.userInfo = userInfo
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.sale-record .u-input {
		width: 532rpx;
		background: #fff !important;
		border-radius: 10rpx !important;
		margin-right: 15rpx;
	}
	.u-input__right-icon {
		padding-right: 16rpx;
	}

	.sale-record .u-input__input {
		padding-left: 70rpx;
		
	}
</style>

<style lang="scss" scoped>
	.sale-record {
		.bg-box {
			background: linear-gradient(to bottom, #FFCC4B, #FFFFFF);

			.my-top-bg {
				width: 750rpx;
				height: 128rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.user-info-box {
			width: 750rpx;

			.user-info-card {
				width: 100%;

				.user-info {
					width: 750rpx;
					box-sizing: border-box;

					.avatar {
						width: 118rpx;
						height: 118rpx;
						z-index: 2;
					}

					.user {
						color: #000;
						z-index: 2;
					}
				}

			}

			.company {

				width: 690rpx;
				height: 88rpx;
				background-color: #F4C233;
				z-index: 2;
				box-sizing: border-box;
				border-radius: 20rpx;

				.name {
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000;
				}

				.change-company {
					width: 106rpx;
					height: 52rpx;
					background-color: #fff;
					border-radius: 6rpx;
					color: #000;
					flex-shrink: 0;

					image {
						width: 25rpx;
						height: 23rpx;
					}
				}
			}
		}

		.input-box {
			width: 100%;
			position: relative;
			background: #EEEEEE;
			border-radius: 30rpx 30rpx 0rpx 0rpx;

			image {
				width: 34rpx;
				height: 40rpx;
				position: absolute;
				left: 7%;
				top: 34%;
				z-index: 9;
			}

			.btn-box {
				width: 140rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				color: #000;
			}

		}

		.record-card {
			background: #EEEEEE;
			z-index: 1;

			.record-box {

				.record-detail {
					background: #fff;
					padding: 20rpx 30rpx;
					margin: 16rpx auto;
					border-radius: 10rpx;

					.detail-top {
						view {
							color: #000;
							font-weight: 400;
							line-height: 36rpx;
						}

						.record-name {
							font-weight: bold;
							color: #000;
							margin-bottom: 20rpx;

							.name {
								font-weight: 400;
								color: #000;
								width: 394rpx;
								@include text-break;
								@include text-ellipsis-line;
							}

							.scenic {
								text-align: right;
								font-weight: 400;
								color: #000;
								width: 168rpx;
								@include text-break;
								@include text-ellipsis-line;
							}
						}

						.info-box {
							.icon-box {
								position: relative;
								width: 170rpx;
								height: 170rpx;

								.bg1 {
									width: 170rpx;
									height: 170rpx;
									border-radius: 10rpx;
								}
								
							}

						}
					}

					.detail-bottom {
						margin-top: 30rpx;

						view {
							font-size: 24rpx;
							font-weight: 400;
							color: #262626;

							text {
								color: #262626;
							}
						}
					}
				}
			}
		}


	}
</style>